<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">

</head>

<body>
    <div class="wrap">
        <!-- 顶部 -->
        <div class="head">

            <img src="./img/logonew.png" alt="" class="logo">

            <a href="#">
                首页
            </a>
            <a href="./kuwan.html">
                酷玩
            </a>
            <a href="#">
                导购
            </a>
            <a href="#">
                报告
            </a>

            <button class="zhuce">
                注册
            </button>

            <img src="./css/img/search.png" alt="" class="search">



        </div>
        <!-- 大横幅图 -->
        <div class="big-img">
            <img src="./css/img/original.jpg" alt="">

            <div class="big-txt">
                <div class="txt1">
                    幻想小贝HiFi2.1音箱
                </div>
                <div class="txt2">
                    <span>
                        126人申请
                    </span>
                    <span>
                        ￥599
                    </span>
                    <span>
                        20台
                    </span>
                </div>
                <div class="txt3">
                    申请剩余时间：13天5小时37分钟
                </div>

                <button class="shenqing">
                    立即申请
                </button>
            </div>
        </div>

        <!-- 热门试用 -->
        <div class="hot">
            <div class="hot-head">
                热门试用
            </div>
            <div class="hot-box">
                <img src="./css/img/prev.png" alt="" class="prev">
                <div class="hot1">
                    <img src="./img/hot9.jpg" alt="">
                    <p>
                        巴慕达 The Toaster 烤面包机
                    </p>
                    <div class="txt1">
                        <span>
                            2032
                        </span>
                        <span> 20台</span>
                    </div>
                    <div class="txt2">
                        <span>
                            1392
                        </span>
                        申请
                    </div>
                    <div class="txt3">
                        剩余时间2天
                    </div>
                </div>
                <div class="hot3">
                    <img src="./img/hot10.jpg" alt="">
                    <p>
                        Osprey小鹰户外运动专业腰包
                    </p>
                    <div class="txt1">
                        <span>
                            2032
                        </span>
                        <span> 20台</span>
                    </div>
                    <div class="txt2">
                        <span>
                            1392
                        </span>
                        申请
                    </div>
                    <div class="txt3">
                        查看试用名单
                    </div>
                </div>
                <div class="hot1">
                    <img src="./img/hot11.jpg" alt="">
                    <p>
                        Liquid Image 338 运动摄像眼镜
                    </p>
                    <div class="txt1">
                        <span>
                            2032
                        </span>
                        <span> 20台</span>
                    </div>
                    <div class="txt2">
                        <span>
                            1392
                        </span>
                        申请
                    </div>
                    <div class="txt3">
                        剩余时间2天
                    </div>
                </div>
                <div class="hot2">
                    <img src="./img/hot12.jpg" alt="">
                    <p>
                        巴慕达 The Toaster 烤面包机
                    </p>
                    <div class="txt1">
                        <span>
                            2032
                        </span>
                        <span> 20台</span>
                    </div>
                    <div class="txt2">
                        <span>
                            1392
                        </span>
                        申请
                    </div>
                    <div class="txt3">
                        剩余时间2天
                    </div>
                </div>
                <img src="./css/img/next.png" alt="" class="next">

            </div>
        </div>

        <!-- 报告精选 -->
        <div class="baogao">
            <div class="bg">
                <div class="bg-head">
                    报告精选

                    <span>
                        查看更多
                    </span>
                </div>
                <div class="bg-box">
                    <!-- <div class="bg1">

                    </div> -->
                </div>
            </div>
        </div>

        <!-- 导购精选 -->
        <div class="daogou">
            <div class="dg">
                <div class="dg-head">
                    导购精选
                    <span>
                        查看更多
                    </span>
                </div>

                <div class="dg-box">
                    <!-- <div class="dg1">

                    </div> -->
                </div>
            </div>
        </div>

        <!-- 发现酷玩 -->
        <div class="kuwan">
            <div class="kw">
                <div class="kw-head">
                    发现酷玩
                    <span>
                        查看更多
                    </span>
                </div>
                <div class="kw-box">
                    <!-- <div class="kw1">

                    </div> -->
                </div>
                <div class="more">
                    <img src="./css/img/more.png" alt="">
                    点击加载更多
                </div>
            </div>

        </div>

        <!-- 底部信息 -->
        <div class="foot">
            <div class="footer">
                <div class="erweima">
                    <img src="./img/code.png" alt="">
                </div>

                <div class="jiguo">
                    <img src="./img/logoImg.jpg" alt="">
                    <p>
                        全球酷玩试用导购平台酷·新奇·好玩·品质
                    </p>

                    <p>
                        微信添加"JguoJguo"
                        <span>
                            获取我们的服务。
                        </span>
                    </p>
                </div>

                <div>
                    <dl>
                        <dt>
                            免费试用
                        </dt>
                        <dd>
                            试用流程
                        </dd>
                        <dd>
                            如何提高成功率
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            友情链接
                        </dt>
                        <dd>
                            智东西
                            <span>
                                WEIBUSI
                            </span>
                        </dd>
                        <dd>
                            搜狐IT <span>
                                腾讯科技
                            </span>
                        </dd>
                        <dd>
                            搜狐数码 <span>
                                凤凰科技
                            </span>
                        </dd>
                        <dd>
                            凤凰数码 <span>
                                PConline
                            </span>
                        </dd>
                        <dd>
                            泡泡网 <span>
                                3W咖啡
                            </span>
                        </dd>
                        <dd>
                            ZUK社区 <span>
                                亿觅emie
                            </span>
                        </dd>
                        <dd>
                            极客公园 <span>易迅易启玩</span>
                        </dd>
                        <dd>
                            果库
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            购买攻略
                        </dt>
                        <dd>
                            美亚海淘教程
                        </dd>
                        <dd>
                            日亚海淘教程
                        </dd>
                        <dd>
                            海淘转运攻略
                        </dd>
                        <dd>
                            kickstarter 众筹购买攻略
                        </dd>
                        <dd>
                            indiegogo 众筹购买攻略
                        </dd>


                    </dl>

                    <dl>
                        <dt>
                            厂商合作
                        </dt>
                        <dd>
                            关于极果
                        </dd>
                        <dd>
                            联系我们
                        </dd>
                        <dd>
                            商务合作：BD@jiguo.com
                        </dd>
                        <dd>
                            CEO邮箱：CEO@jiguo.com
                        </dd>



                    </dl>
                </div>

                <div class="last">
                    ©2016 极果版权所有
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jq.js"></script>
    <script>
        $(function () {
            // 报告-最热
            var bgBox = $('.bg-box');
            $.ajax({
                url: 'http://localhost:3000/report/hot', type: 'get', success(res) {
                    // console.log(res);
                    for (var i = 0; i < res.length; i++) {
                        var div = $("<div></div>");
                        div.attr('class', 'bg1');
                        bgBox.append(div);
                        var img = $("<img/>");
                        img.attr('src', res[i].img);
                        div.append(img);
                        var pinglun = $("<div></div>");
                        pinglun.attr('class', 'pinglun')
                        pinglun.html(res[i].text);
                        div.append(pinglun);
                        var ul = $("<ul></ul>");
                        var li = $("<li></li>");
                        div.append(ul);
                        ul.append(li);
                        li.html(res[i].uName);
                    }
                }
            })


            // 导购精选
            var dgBox = $('.dg-box');
            $.ajax({
                url: 'http://localhost:3000/guid/hot', type: 'get', success(res) {
                    // console.log(res);
                    for (var i = 0; i < res.length; i++) {
                        var div = $("<div></div>");
                        div.attr('class', 'dg1');
                        dgBox.append(div);
                        var img = $('<img/>');
                        img.attr('src', res[i].img);
                        div.append(img);
                        var pinglun = $("<div></div>");
                        pinglun.attr('class', 'pinglun')
                        pinglun.html(res[i].text);
                        div.append(pinglun);
                        var span1 = $("<span></span>");
                        span1.attr('class', 'span1')
                        var img1 = $('<img/>');
                        img1.attr('src', './css/img/xin.png');
                        var span2 = $("<span></span>");
                        span2.attr('class', 'span2')
                        var img2 = $('<img/>');
                        img2.attr('src', './css/img/zan.png');
                        span1.html(img1);
                        span1.append(res[i].like);
                        div.append(span1)
                        span2.html(img2);
                        span2.append(res[i].words);
                        div.append(span2);
                    }
                }
            })


            // 发现酷玩
            var kwBox = $('.kw-box')
            $.ajax({
                url: 'http://localhost:3000/play/new', type: 'get', success(res) {
                    console.log(res);
                    for (var i = 0; i < res.length; i++) {
                        for (var j = 0; j < res[i].length; j++) {
                            var div = $("<div></div>");
                            div.attr('class', 'kw1');
                            kwBox.append(div);
                            var img = $('<img/>');
                            img.attr('src', res[i][j].img);
                            div.append(img);
                            // var text = $("<div></div>");
                            // text.attr('class', 'text')
                            // text.html(res[i][j].text);
                            // div.append(text);

                            var text = $("<div></div>");
                            text.attr('class', 'text')
                            text.html(res[i][j].text);
                            div.append(text);
                            var pinglun = $('<span></span>');
                            pinglun.attr('class', 'pinglun');
                            pinglun.html(res[i][j].description);
                            div.append(pinglun);


                            var span1 = $("<span></span>");
                            span1.attr('class', 'span1')
                            var img1 = $('<img/>');
                            img1.attr('src', './css/img/xin.png');
                            var span2 = $("<span></span>");
                            span2.attr('class', 'span2');
                            var img2 = $('<img/>');
                            img2.attr('src', './css/img/zan.png');
                            span1.html(img1);
                            span1.append(res[i][j].like);
                            div.append(span1)
                            span2.html(img2);
                            span2.append(res[i][j].words);
                            div.append(span2);
                            var span3 = $("<span></span>");
                            span3.attr('class', 'price');
                            span3.html(res[i][j].price);
                            div.append(span3)
                        }

                    }






                }
            })

            var kuWan = $('.kuwan')
            $('.more').on({
                click: function () {
                    kuWan.css("height", "+=600px");
                    kwBox.css('height', "+=600px");

                }
            })

        })
    </script>
</body>

</html>